<template>
    <el-row class="lucidity-note-main-box">
        <component 
            :transfer="transfer"
            :is="content">
        </component>
    </el-row>
</template>

<script>
    import {ref, reactive, toRefs, onMounted, shallowRef} from "vue";

    export default ({
        setup(props, {emit}) {
            const LUCIDITY_NOTE_APP_MAIN_DATASET = reactive({
                content: shallowRef(LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.overview)),
                transfer: {theme: "eclipse", mode: "null", content: "#### 请输入需要笔记的内容."}
            });

            onMounted(() => {
                // 监听加载树指令触发
                LucidityNoteApp.$mitt.on(LucidityNoteApp.COMMANDS.openFile, (data) => {
                    // todo 根据 data 的节点ID 查询出来: 节点信息内容, 然后还需要得到主题信息, 节点文件的内容
                    LucidityNoteApp.Helper.net.get(
                        `/notetree/content/${data.notebookid}/${data.id}`,
                        null,
                        (response) => {
                            if (response.data.mode) {
                                // 需要动态加载的 js 文件
                                var jsurls = [];
                                if (response.data.addons) {
                                    response.data.addons.forEach(element => {
                                        jsurls.push(`/assets/static/moudle/codemirror/addon/${element}`)
                                    });
                                }

                                jsurls.push(`/assets/static/moudle/codemirror/mode/${response.data.mode}/${response.data.mode}.js`)
                                if (response.data.dependencies) {
                                    response.data.dependencies.forEach(element => {
                                        jsurls.push(`/assets/static/moudle/codemirror/mode/${element}/${element}.js`)
                                    });
                                }

                                LucidityNoteApp.loadJS("deleteScript", jsurls).then(res => {
                                    // 加载成功之后的处理
                                    LUCIDITY_NOTE_APP_MAIN_DATASET.transfer = response.data
                                    LUCIDITY_NOTE_APP_MAIN_DATASET.content = shallowRef(LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.editor))
                                }).catch((err) => {
                                    ElementPlus.ElMessage({
                                        type: "error",
                                        message: err
                                    })
                                });
                            } else {
                                LUCIDITY_NOTE_APP_MAIN_DATASET.transfer = response.data
                                LUCIDITY_NOTE_APP_MAIN_DATASET.content = shallowRef(LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.editor))
                            }
                        },
                        (err) => {ElementPlus.ElMessage.error(err.message)}
                    );
                    
                });
            });

            return {
                ...toRefs(LUCIDITY_NOTE_APP_MAIN_DATASET)
            }
        }
    })
</script>

<style scoped>
    .lucidity-note-main-box {
        width: var(--lucidity-note-full-width);
        height: var(--lucidity-note-full-height);
    }
</style>